<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <div class="home">
    <NavBar>
      <template #left>
        <div class="share" @click="showShare = true">
          <div class="icon">
            <image src="/static/images/share-white.png" />
          </div>
          分享互助共赢
        </div>
      </template>
    </NavBar>

    <!-- 顶部banner -->
    <MenuBanner :scrollTop="scrollTop" />

    <div
      class="content"
      :style="{
        zIndex: dateDialogStatus ? 999 : 2,
      }"
    >
      <!-- 通知 -->
      <Notice />

      <!-- 入驻日期选择 -->
      <SearchHotel @dateDialogState="dateDialogChange" />

      <!-- 活动 -->
      <Activity />

      <!-- 推荐民宿 -->
      <Recommend ref="recommend" />
    </div>

    <TabBar :scrollTop="scrollTop" />

    <ShareMode v-model="showShare" isCustomNav />
  </div>
</template>

<script lang="ts" setup>
import MenuBanner from './components/MenuBanner.vue'
import SearchHotel from './components/SearchHotel.vue'
import Activity from './components/Activity.vue'
import Recommend from './components/Recommend.vue'
import Notice from './components/Notice.vue'

const recommend = ref()
const showShare = ref(false)

// 上拉加载
onReachBottom(() => {
  recommend.value.getMore()
})

const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

onHide(() => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0,
  })
  scrollTop.value = 0
})

// 日期选择组件显示时，需要将层级提高，否则会遮不住底部tabbar
const dateDialogStatus = ref(false)
function dateDialogChange(e) {
  dateDialogStatus.value = e
}
</script>

<style scoped lang="scss">
.home {
  .content {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    min-height: calc(100vh - 800rpx);
    padding-top: 0rpx;
    padding-bottom: 180rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 180rpx) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 180rpx) !important;
    margin-top: -40rpx;
    background: linear-gradient(180deg, #ffffff 0%, #f0f2f6 100%);
    border-radius: 38rpx 38rpx 0 0;
  }

  .share {
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    font-size: 30rpx;
    color: #fff;
    white-space: nowrap;
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 62rpx;
      height: 62rpx;
      margin-right: 10rpx;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>
